<template>
	<view v-if="msg" class="time" :style="{'color':color}">
		<!-- 第二个( ||) 条件给普通商品秒杀组件使用的 -->
		<view class="msg" v-if="!small || (status == 2 && msg)">{{ msg }}</view>
		<template v-if="status < 2">
			<view style="margin-right: 12rpx;" v-if="timeObj.day > 0">{{ timeObj.day ? timeObj.day + '天 ' : '' }}</view>
			<view class="item-bgc" >{{ timeObj.hours }}</view>
			<view class="mao">:</view>
			<view class="item-bgc">{{ timeObj.minute }}</view>
			<template v-if="timeObj.day == 0">
				<view class="mao">:</view>
				<view class="item-bgc" >{{ timeObj.day ? '' : timeObj.second }}</view>
			</template>
		</template>
	</view>
</template>

<script>
import { countTime } from '@/utils/moment/index.js';
export default {
	data() {
		return {
			time:null,
			timeObj: {},
			status: 2, // 是否未结束 2:已结束 1：进行中 0：未开始
			msg: ''
		};
	},
	props: {
		color: {
			type: String,
			default:' #333'
		}, // 字体颜色
		start: {
			type: [String, Number],
			default: null
		}, // 时间戳
		end: {
			type: [String, Number],
			default: null
		}, // 时间戳
		sale_time:{
			type:String,
			default:''
		},// 销售时间段
		small:{
			type:Boolean,
			default:false
		},// 是否小布局展示
	},
	watch: {
		start: {
			handler(val) {
				let currentTime = new Date().getTime();
				if (currentTime > this.end) {
					this.msg = '活动已结束';
				} else {
					this.$checkFlashList(currentTime);
				}
			},
			immediate: true
		}
	},
	beforeDestroy () {
		if(this.time){
			clearTimeout(this.time)
		}
	},
	methods: {
		$checkFlashList(currentTime) {
			let start_date = this.start
			let end_date = this.end
			let saleArr = (this.sale_time || '').split(',')
			let sale_startArr = (saleArr[0] || '').split(':')
			let sale_endArr = (saleArr[1] || '').split(':')
			if(this.sale_time){
				let current = new Date()
				let sale_start = current.setHours(sale_startArr[0],sale_startArr[1],0)
				let sale_end = current.setHours(sale_endArr[0],sale_endArr[1],0)
				if(sale_start > start_date){
					start_date = sale_start
				}
				if(sale_end < end_date){
					end_date = sale_end
				}
			}
			let nextTime = 0;
			if(currentTime < start_date){
				this.status = 0
				nextTime = start_date - currentTime
				this.msg = '距开始';
			}else if(currentTime < end_date){
				this.status = 1
				this.msg = '距结束';
				nextTime = end_date - currentTime;
			}else if(this.sale_time){
				let tomDate = new Date()
				tomDate.setDate(tomDate.getDate()+1)
				let tomorrow_start = tomDate.setHours(sale_startArr[0],sale_startArr[1],0)
				let tomorrow_end = tomDate.setHours(sale_endArr[0],sale_endArr[1],0)
				if(this.end < tomorrow_end){
					tomorrow_end = this.end
				}
				if(tomorrow_start < this.end){// 明天还可以抢购
					nextTime = tomorrow_start - currentTime
					this.msg = '距开始';
					this.status = 0
				}
			}
			if(nextTime > 0){
				this.getCountTime(nextTime);
			} else {
			  this.status = 2
			  this.msg = '活动已结束'
			}
		},
		getCountTime(nextTime) {
			if (nextTime >= 0) {
				this.timeObj = countTime(nextTime);
				this.time = setTimeout(() => {
					this.getCountTime(this.timeObj.nextTime);
				}, 1000);
			}else if(this.status == 0 || this.sale_time){
				let currentTime = new Date().getTime()
				this.$checkFlashList(currentTime)
			}
		}
	}
};
</script>
<style scoped lang="scss">
	.msg{
		margin-right: 10rpx;
	}
	.item-bgc{
		background-color: #fa7e0e;
		color: #fff;
		text-align: center;
		padding: 0 10rpx;
	}
	.time{
		font-size: 24rpx;
		display: flex;
		align-items: center;
		.mao{
			padding: 0 10rpx;
		}
	}

</style>
